<template>
  <div class="relative rounded-t-md flex flex-col" :class="store.isFlag ? 'w-1/2 h-70' : 'w-full h-100'">
    <h4 id="yu-bgColor-tew-only" class="pl-2  h-8 flex justify-between items-center  m-0  z-50" v-if="isH4">
      <span>歌词</span>
      <span class="p-2 yu-textColor-hover yu-color-text yu-titleColor cursor-pointer" @click="closeLyrics">x</span>
    </h4>
    <ul class="lyric w-full h-full absolute overflow-auto text-sm" :class="store.isFlag ? 'yu-bgColor-one-only' : ''" ref="lyric">
      <li ref="lyricList" class="my-3 text-center" :class="{choose: lyricIndex === item.time }"  v-for="item in store.lyric">{{ item.lyric }}</li>
    </ul>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {onMounted, ref, watch, watchEffect} from "vue";

const store = useStore()
// 滚动歌词实例
const lyric = ref()

// li标签实例
const lyricList = ref()
// 获取含有类名choose的li标签的高度，用来设置lyricList.value.scrollTop来滚动
const chooseLi = ref(0)
// 用来比对当前播放的时间戳是否和歌词的时间戳对应
const lyricIndex = ref(0)

// 用来查看lyricIndex是否改变
const changeLyricIndex = ref(false)


// 检测是否渲染完成
let isSuccess = false
onMounted(() => {
  isSuccess = true
})


const $emit = defineEmits(['closeLyrics'])
// 关闭歌词
const closeLyrics = () => {
  // 派发到父组件中
  $emit('closeLyrics')
}

// 用来监听lyricIndex是否改变
watch(lyricIndex,(o, n) => {
  changeLyricIndex.value = true
})
defineProps({
  isH4: {
    type: Boolean,
    default: false
  }
})

watchEffect(() => {
  // 获取当前歌曲播放位置
  let playerTime = Number((store.playerTime * 1000).toFixed(0))
  if (store.lyric && isSuccess) {
    for (const key in store.lyric) {
      let i = Number(key)
      // i + 1的长度不能大于歌词的长度
      if ((i + 1) < store.lyric.length) {
        // 当前播放歌词的时间戳要大于前一个歌词的时间戳 并且要小于后一个播放的时间戳，才能保证当前唱的位置和高亮的歌词对应
        if (store.lyric[i].time < playerTime && playerTime < store.lyric[i + 1].time) {
          // 防止重复赋值
          if(lyricIndex.value !== store.lyric[i].time) {
            // 当前播放的时间戳，在这个区间时将这个小的时间戳赋值，用来展示高亮
            lyricIndex.value = store.lyric[i].time
          }
          // 延迟两秒防止，数据没有渲染，就开始调用了
          if (playerTime > 2000) {
            // 判断当前li标签上是否存在这类choose，
            if (lyricList.value[i].className.includes('choose') && chooseLi.value !== lyricList.value[i].offsetTop) {
              // 如果存在就将当前类的offerTop赋值给chooseLi它之后在赋值给lyric.value.scrollTop用作滚动
              chooseLi.value = lyricList.value[i].offsetTop - 100
            }
            // 监听高亮的类名时间戳是否改变如果改变了，才让scrollTop加
            if (changeLyricIndex.value) {
              lyric.value.scrollTop = chooseLi.value
              // console.log(chooseLi.value, lyric.value.scrollTop)
              // 重新将其设置为false等待下次改变
              changeLyricIndex.value = false
            }
          }
          break;
        }
      }
    }
  }
})
</script>

<style scoped lang="scss">
.lyric {
  .choose {
    font-size: 20px;
    color: v-bind('store.theme.textColor')!important;
    font-weight: bold;
  }
}
// 标题默认颜色
.yu-titleColor {
  color: v-bind('store.theme.titleTextColor')
}

// 只是二级背景
#yu-bgColor-tew-only {
  background-color: v-bind('store.theme.secondaryBgColor')!important;
  color: v-bind('store.theme.hoverTextColor');
}

// 只是一级背景
.yu-bgColor-one-only {
  background-color: v-bind('store.theme.bgColor');
}

// hover字体颜色
.yu-textColor-hover {
  &:hover {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
}

// 字体颜色
.yu-color-text {
  color: v-bind('store.theme.textColor');
}
</style>
